<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen"/>


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen"/>

    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>


<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

<article class="prevnext">
    <a class="" href="01.Sample-Boxed.html">01</a>
    <a class="" href="02.Sample-Fullwidth.html">02</a>
    <a class="active" href="03.Sample-FullScreen.html">03</a>
    <a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
    <a class="" href="05.Sample-Aligns.html">05</a>
    <a class="" href="06.Sample-AlignForce.html">06</a>
    <a class="" href="07.Sample-Videos.html">07</a>
    <a class="" href="08.Sample-NavigationStyle.html">08</a>
    <a class="" href="09.Sample-Api.html">09</a>
    <a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
    <a class="" href="11.Sample-Shuffle.html">11</a>
    <a class="" href="12.Sample-Backgrounds.html">12</a>
    <a class="" href="13.Sample-HideCaptions.html">13</a>
    <a class="" href="14.Sample-KenBurns.html">14</a>
    <a class="" href="15.Sample-VideoBG.html">15</a>
    <a class="" href="16.Caption-ShowDown.html">16</a>
    <a class="" href="17.Sample-DottedBG.html">17</a>
    <a class="" href="18.Sample-NewCaptionEffects.html">18</a></article>

<article class="">

    <!--
    #################################
        - THEMEPUNCH BANNER -
    #################################
    -->
    <!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->

    <div class="tp-banner-container">
        <div class="tp-banner">
            <ul>
                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                    <!-- MAIN IMAGE -->
                    <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                         data-bgrepeat="no-repeat">


                    <!-- LAYERS -->
                    <div class="tp-caption mediumlarge_light_white_center customin customout start"
                         data-x="50"
                         data-hoffset="0"
                         data-y="50"

                         data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="500"
                         data-easing="Back.easeInOut"
                         data-endspeed="300">BASIC CAPTION<br>ANIMATIONS
                    </div>


                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption medium_bg_asbestos fade"
                         data-x="50"
                         data-y="250"
                         data-speed="500"
                         data-start="800"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">FADE
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption medium_bg_asbestos sfl"
                         data-x="50"
                         data-y="300"
                         data-speed="500"
                         data-start="1200"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">SHORT FROM LEFT (sfl)
                    </div>

                    <!-- LAYER NR. 3 -->
                    <div class="tp-caption medium_bg_asbestos skewfromleft"
                         data-x="50"
                         data-y="350"
                         data-speed="800"
                         data-start="1900"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">SKEW FROM LEFT (skewfromleft)
                    </div>

                    <!-- LAYER NR. 4 -->
                    <div class="tp-caption medium_bg_asbestos sft"
                         data-x="50"
                         data-y="200"
                         data-speed="800"
                         data-start="2600"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">SHORT FROM TOP (sft)
                    </div>

                    <!-- LAYER NR. 5 -->
                    <div class="tp-caption medium_bg_asbestos lft"
                         data-x="50"

                         data-y="400"
                         data-speed="800"
                         data-start="3300"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">LONG FROM TOP (lft)
                    </div>

                    <!-- LAYER NR. 6 -->
                    <div class="tp-caption medium_bg_asbestos sfr"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="200"
                         data-speed="800"
                         data-start="4000"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">SHORT FROM RIGHT (sfr)
                    </div>


                    <!-- LAYER NR. 7 -->
                    <div class="tp-caption medium_bg_asbestos skewfromright"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="250"
                         data-speed="800"
                         data-start="4700"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">SKEW FROM RIGHT (skewfromright)
                    </div>


                    <!-- LAYER NR. 8 -->
                    <div class="tp-caption medium_bg_asbestos sfb"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="300"
                         data-speed="800"
                         data-start="5400"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">SHORT FROM BOTTOM (sfb)
                    </div>

                    <!-- LAYER NR. 9 -->
                    <div class="tp-caption medium_bg_asbestos lfb"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="350"
                         data-speed="800"
                         data-start="6100"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">LONG FROM BOTTOM (lfb)
                    </div>

                    <!-- LAYER NR. 10 -->
                    <div class="tp-caption medium_bg_asbestos randomrotate"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="400"
                         data-speed="800"
                         data-start="6800"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">RANDOM ROTATE (randomrotate)
                    </div>

                    <!-- LAYER NR. 11 -->
                    <div class="tp-caption medium_bg_asbestos lfr"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="450"
                         data-speed="800"
                         data-start="7500"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">LONG FROM RIGHT (lfr)
                    </div>

                    <!-- LAYER NR. 12 -->
                    <div class="tp-caption medium_bg_asbestos lfl"
                         data-x="50"
                         data-y="450"
                         data-speed="800"
                         data-start="7500"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">LONG FROM LEFT (lfl)
                    </div>
                </li>

                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                    <!-- MAIN IMAGE -->
                    <img src="images/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                         data-bgrepeat="no-repeat">
                    <!-- LAYERS -->
                    <!-- LAYER 0 -->
                    <div class="tp-caption mediumlarge_light_white_center customin customout start"
                         data-x="50"
                         data-hoffset="0"
                         data-y="50"

                         data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="500"
                         data-easing="Back.easeInOut"
                         data-endspeed="300">SOME FANCY EASING
                    </div>

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption medium_bg_asbestos sfl"
                         data-x="50"
                         data-y="250"
                         data-speed="500"
                         data-start="800"
                         data-easing="Power1.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Power1.easeOut
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption medium_bg_asbestos sfl"
                         data-x="50"
                         data-y="300"
                         data-speed="500"
                         data-start="1200"
                         data-easing="Back.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Back.easeOut
                    </div>

                    <!-- LAYER NR. 3 -->
                    <div class="tp-caption medium_bg_asbestos skewfromleft"
                         data-x="50"
                         data-y="350"
                         data-speed="800"
                         data-start="1900"
                         data-easing="Elastic.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Elastic.easeOut
                    </div>

                    <!-- LAYER NR. 4 -->
                    <div class="tp-caption medium_bg_asbestos skewfromleft"
                         data-x="50"
                         data-y="200"
                         data-speed="800"
                         data-start="2600"
                         data-easing="Power3.easeInOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Power3.easeInOut
                    </div>

                    <!-- LAYER NR. 5 -->
                    <div class="tp-caption medium_bg_asbestos skewfromleft"
                         data-x="50"

                         data-y="400"
                         data-speed="800"
                         data-start="3300"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Power4.easeOut
                    </div>

                    <!-- LAYER NR. 6 -->
                    <div class="tp-caption medium_bg_asbestos skewfromright"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="200"
                         data-speed="800"
                         data-start="4000"
                         data-easing="Power2.easeInOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Power2.easeInOut
                    </div>


                    <!-- LAYER NR. 7 -->
                    <div class="tp-caption medium_bg_asbestos skewfromright"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="250"
                         data-speed="800"
                         data-start="4700"
                         data-easing="Circ.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Circ.easeOut
                    </div>


                    <!-- LAYER NR. 8 -->
                    <div class="tp-caption medium_bg_asbestos skewfromright"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="300"
                         data-speed="800"
                         data-start="5400"
                         data-easing="Cube.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Cube.easeOut
                    </div>

                    <!-- LAYER NR. 9 -->
                    <div class="tp-caption medium_bg_asbestos skewfromright"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="350"
                         data-speed="800"
                         data-start="6100"
                         data-easing="Bounce.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Bounce.easeOut
                    </div>

                    <!-- LAYER NR. 10 -->
                    <div class="tp-caption medium_bg_asbestos skewfromright"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="400"
                         data-speed="800"
                         data-start="6800"
                         data-easing="Linear.easeNone"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Linear.easeNone
                    </div>

                    <!-- LAYER NR. 11 -->
                    <div class="tp-caption medium_bg_asbestos skewfromright"
                         data-x="right"
                         data-hoffset="-50"
                         data-y="450"
                         data-speed="800"
                         data-start="7500"
                         data-easing="Expo.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Expo.easeOut
                    </div>

                    <!-- LAYER NR. 12 -->
                    <div class="tp-caption medium_bg_asbestos skewfromleft"
                         data-x="50"
                         data-y="450"
                         data-speed="800"
                         data-start="7500"
                         data-easing="Expo.easeIn"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="z-index: 6">Expo.easeIn
                    </div>
                </li>

                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                    <!-- MAIN IMAGE -->
                    <img src="images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                         data-bgrepeat="no-repeat">
                    <!-- LAYERS -->
                    <!-- LAYERS -->
                    <div class="tp-caption mediumlarge_light_white_center customin customout start"
                         data-x="right"
                         data-hoffset="-60"
                         data-y="bottom"
                         data-voffset="-120"

                         data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="500"
                         data-easing="Back.easeInOut"
                         data-endspeed="300">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW
                    </div>
                    <!-- LAYER NR. 5 -->
                    <div class="tp-caption medium_bg_asbestos skewfromleft customout"
                         data-x="104"
                         data-y="154"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="800"
                         data-start="800"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="on"
                         style="z-index: 6">GO AND GIVE A TRY
                    </div>
                </li>

                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="5" data-masterspeed="700">
                    <!-- MAIN IMAGE -->
                    <img src="images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center"
                         data-bgrepeat="no-repeat">
                    <!-- LAYERS -->
                    <!-- LAYER NR. 5 -->
                    <div class="tp-caption medium_bg_asbestos skewfromleft customout"
                         data-x="104"
                         data-y="154"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="800"
                         data-start="800"
                         data-easing="Power4.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="on"
                         style="z-index: 6">CREATE AWESOME ANIMATIONS
                    </div>
                </li>


            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </div>
    <script type="text/javascript">

        var revapi;

        jQuery(document).ready(function () {

            revapi = jQuery('.tp-banner').revolution(
                {
                    delay: 15000,
                    startwidth: 1170,
                    startheight: 500,
                    hideThumbs: 10,
                    fullWidth: "off",
                    fullScreen: "on",
                    fullScreenOffsetContainer: ""
                });

        });	//ready

    </script>

    <!-- END REVOLUTION SLIDER -->

    <!-- Content End -->


</article> <!-- END OF SPECTACULUS -->


<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

<section class="container">
    <h2>What to do for FullScreen?</h2>
    <p>Make sure that your slider Wrapping Container allows you to go fullwidth and fullheight, and there is no
        limitation in width / maxwidth.In case your container is Boxed, and you want to force the Slider to go
        Fullscreen, than simple use the forceFullWidth:"on" parameter !</p>
    <p>If you wish to have an Offset top and bottom, since you have some header or Footer, or both, please take a look
        on the example 03B here: <a href="03B.Sample-FullScreen-Offsets.html">03B.Sample-FullScreen-Offsets</a></p>


    <div style="width:100%; height:40px"></div>
    <h3> Initialise the Plugin with fullScreen parameters:</h3>
    <pre>
	  	&lt;script type="text/javascript"&gt;

				var revapi;

				jQuery(document).ready(function() {

					   revapi = jQuery('.tp-banner').revolution(
						{
							delay:15000,
							startwidth:1170,
							startheight:500,
							hideThumbs:10,
							fullWidth:"off",
							fullScreen:"on",
							fullScreenOffsetContainer: ""

						});

				});	//ready

			&lt;/script&gt;
	  </pre>
</section>


</body>